<template>
  <view class="comment-page">
    <!-- 商品信息 -->
    <view class="goods-info">
      <image class="goods-image" :src="goodsInfo.image" mode="aspectFit"></image>
      <view class="goods-right">
        <view class="goods-name">{{goodsInfo.name}}</view>
        <view class="goods-spec">规格: {{goodsInfo.spec}}</view>
      </view>
    </view>
    
    <!-- 评分 -->
    <view class="rate-section">
      <text class="rate-title">商品评分</text>
      <uni-rate 
        v-model="commentData.rate" 
        size="24" 
        color="#bbb" 
        active-color="#ff2d4a"
        margin="10"
      ></uni-rate>
    </view>
    
    <!-- 评价内容 -->
    <view class="content-section">
      <textarea 
        class="content-input" 
        v-model="commentData.content" 
        placeholder="商品满足你的期待吗？说说你的使用感受吧~"
        maxlength="200"
      ></textarea>
      <view class="content-count">{{commentData.content.length}}/200</view>
    </view>
    
    <!-- 上传图片 -->
    <view class="upload-section">
      <text class="upload-title">上传图片(可选)</text>
      <view class="upload-list">
        <view 
          class="upload-item" 
          v-for="(item, index) in commentData.images" 
          :key="index"
        >
          <image class="upload-image" :src="item" mode="aspectFill"></image>
          <view class="delete-btn" @click="deleteImage(index)">
            <uni-icons type="closeempty" size="20" color="#fff"></uni-icons>
          </view>
        </view>
        <view 
          class="upload-btn" 
          v-if="commentData.images.length < 9"
          @click="chooseImage"
        >
          <uni-icons type="plusempty" size="40" color="#ccc"></uni-icons>
        </view>
      </view>
    </view>
    
    <!-- 提交按钮 -->
    <view class="submit-btn" @click="submitComment">
      提交评价
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      goodsInfo: {
        name: '商品名称',
        image: '/static/goods1.jpg',
        spec: '默认规格'
      },
      commentData: {
        rate: 5,
        content: '',
        images: []
      }
    }
  },
  onLoad(options) {
    if (options.id) {
      // 实际项目中这里应该根据订单ID请求API获取商品信息
      // 这里使用模拟数据
      this.getGoodsInfo(options.id)
    }
  },
  methods: {
    getGoodsInfo(id) {
      // 模拟根据订单ID获取商品信息
    },
    chooseImage() {
      uni.chooseImage({
        count: 9 - this.commentData.images.length,
        sizeType: ['compressed'],
        sourceType: ['album'],
        success: (res) => {
          this.commentData.images = [...this.commentData.images, ...res.tempFilePaths]
        }
      })
    },
    deleteImage(index) {
      this.commentData.images.splice(index, 1)
    },
    submitComment() {
      if (!this.commentData.content) {
        uni.showToast({
          title: '请填写评价内容',
          icon: 'none'
        })
        return
      }
      
      uni.showLoading({
        title: '提交中...'
      })
      
      // 模拟API请求
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: '评价成功',
          icon: 'success'
        })
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      }, 1000)
    }
  }
}
</script>

<style>
.comment-page {
  padding: 30rpx;
}
.goods-info {
  display: flex;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  margin-bottom: 30rpx;
}
.goods-image {
  width: 120rpx;
  height: 120rpx;
  margin-right: 20rpx;
}
.goods-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.goods-name {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.goods-spec {
  font-size: 24rpx;
  color: #999;
}
.rate-section {
  padding: 30rpx;
  background-color: #fff;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}
.rate-title {
  font-size: 28rpx;
  color: #333;
  margin-right: 30rpx;
}
.content-section {
  padding: 30rpx;
  background-color: #fff;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}
.content-input {
  width: 100%;
  height: 200rpx;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
}
.content-count {
  text-align: right;
  font-size: 24rpx;
  color: #999;
}
.upload-section {
  padding: 30rpx;
  background-color: #fff;
  border-radius: 10rpx;
  margin-bottom: 30rpx;
}
.upload-title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}
.upload-list {
  display: flex;
  flex-wrap: wrap;
}
.upload-item {
  width: 160rpx;
  height: 160rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
  position: relative;
}
.upload-image {
  width: 100%;
  height: 100%;
  border-radius: 10rpx;
}
.delete-btn {
  position: absolute;
  right: -10rpx;
  top: -10rpx;
  width: 40rpx;
  height: 40rpx;
  background-color: #ff2d4a;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.upload-btn {
  width: 160rpx;
  height: 160rpx;
  border: 1rpx dashed #ccc;
  border-radius: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.submit-btn {
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background-color: #ff2d4a;
  color: #fff;
  font-size: 28rpx;
  border-radius: 40rpx;
}
</style>